<style type="text/css">
li {
    list-style: none;
}

#contextmenu {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ccc;
    display: none;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
}

#contextmenu li {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #aaa;
    cursor: pointer;
}

.div_1 {
    background-color: #007ac1;
}

.div_2 {
    background-color: #00b150;
}

.div_3 {
    background-color: #c0c0c0;
}

.div_4 {
    background-color: #15dcdc;
}

.div_5 {
    background-color: #f31bf3;
}

.div_6 {
    background-color: #f7883a;
}

.div_7 {
    background-color: #ff0000;
}

.div_8 {
    background-color: #ffff00;
}

.legend dl dt {
    float: left;
    height: 30px;
    font-size: 12px;
    font-family: 微软雅黑;
    text-align: center;
    line-height: 30px;
}

.legend dl dd {
    float: left;
    width: 10px;
    height: 30px;
    /*line-height: 40px;*/
    /*font-size: 8px;*/
    /*font-family: 微软雅黑;*/
}
</style>
<script type="text/javascript" src="${request.getContextPath()}/js/jTopo/jtopo-0.4.8-min.js"></script>
%{--<script type="text/javascript" src="${request.getContextPath()}/js/jquery/jquery.hDialog.min.js"></script>--}%

<script type="text/javascript">

    /**canvas自适应start**/
    //    var CanvasAutoResize = {
    //        draw: function () {
    //            var ctx = document.getElementById('canvas').getContext('2d');
    //            var canvasContainer = document.getElementById('canvas-container');
    //            ctx.canvas.width = canvasContainer.offsetWidth - 2;
    //            ctx.canvas.height = canvasContainer.offsetHeight - 2;
    //        },
    //
    //        initialize: function () {
    //            var self = CanvasAutoResize;
    //            self.draw();
    //            $(window).on('resize', function () {
    //                self.draw();
    //            });
    //        }
    //    }
    /**canvas自适应end**/

    /*addNode*/
    var currentNode = null;

    function handler(event) {
        if (event.button == 2) {// 右键
            // 当前位置弹出菜单（div）
            $("#menu").css({
                top: event.pageY,
                left: event.pageX
            }).show();
        }
    }


    $(document).ready(function () {

        /**加载canvas自适应*/
//        CanvasAutoResize.initialize(); //
        getEqpLocation();

    });
    function getEqpLocation() {

        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
        var scene = new JTopo.Scene(stage); // 创建一个场景对象
        scene.alpha = "3";
        scene.setBackground("../images/topo/2.png");
        scene.mode = 'select';
        scene.areaSelect = "false";
        var url = "${request.getContextPath()}/Topo/getEqpStatus";
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
            timeout: 120000,
//            async: false,
            success: function (rst) {
                var total = 0;
                var cont = [];
                $.each(rst, function (index, item) {
                    if ($.inArray(item.EQP_TYPE, cont) < 0) {
                        cont.push(item.EQP_TYPE);
                    }
                    total = index + 1;
                });

                /**total-eqp*/
                $("#total").html(total);
                $.each(rst, function (index, item) {
                    /**设置节点**/
                    var node = new JTopo.Node(index);    // 创建一个节点
                    node.setLocation(item.X, item.Y);    // 设置节点坐标
                    //节点拖动
                    node.dragable = false;
                    node.setSize(item.WIDTH, item.HEIGHT);
                    node.fillColor = item.COLOR;
                    node.text = '微软雅黑'; // 文字
                    node.font = '12px 微软雅黑'; // 字体
                    node.fontColor = '0,0,0';
                    node.textPosition = 'Middle_Center'; //节点文本位置
                    node.textOffsetY = -6;  //文字向下偏移-6个像素
                    node.borderWidth = 1; // 边框的宽度
                    node.borderColor = '193,153,153'; //边框颜色
                    node.text = item.EQPID;
                    scene.add(node); // 放入到场景中
//                            container.add(node);
                    //mouseover
                    node.addEventListener('click', function (obj) {

                        var url = "${request.getContextPath()}/topo2/getEqpWip?eqpid=" + item.EQPID
                        $(obj).dialog({
                            id: 'mydialog',
                            url: url,
                            width: 700,
                            height: 400,
                            title: '设备id：' + item.EQPID
                        });
                        console.log(url)
                    });
                    /**鼠标移出事件**/
//                    node.addEventListener('mouseout', function () {
//                        $("#contextmenu").hide();
//                    });
                });
            }
        });
    }

</script>

<div class="bjui-pageHeader">
    <div>
        <dl>
            <h4><td><strong>Total Equipment：</strong></td>
                <strong><a id="total"></a></strong></h4>
        </dl>
    </div>


    <div class="legend">
        <dl>
            <dt class="div_1">PM</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_2">RUN</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_3">WARM,OFF</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_4">DOWNMON,SETUP,MONITOR,ADDMON</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_5">LENT,DCWAFER</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_6">WAITMFG</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_7">FAC,AUTO,PROCESS,EQ,WAITENG</dt>
            <dd></dd>
        </dl>
        <dl>
            <dt class="div_8">IDLE</dt>
            <dd></dd>
        </dl>
    </div>

</div>

<div class="bjui-pageContent">
    <div>
        <ul id="contextmenu" style="display:none;position: absolute;">
            <li id="actualPower" style=" float:left;"></li>
            <li id="actualPower2" style=" float:right;"></li>
        </ul>
    </div>

    <div id="canvas-container" style="padding: 0; margin: 0;">
        <canvas id="canvas" width="1200" height="741"
                style=" border: 1px solid rgb(68, 68, 68); cursor: default;margin: 0; padding: 0"></canvas>
    </div>
</div>